<template>
    <div class="main">
        <main>
            <!-- featured section -->
            <div class="flex flex-wrap md:flex-no-wrap space-x-0 md:space-x-6 mb-16">
                <!-- main post -->
                <div class=" lg:mb-0  p-4 lg:p-0 w-full md:w-4/7 relative rounded block">
                    <!--                    幻灯片-->
                    <hd-swiper></hd-swiper>
                    <span class="text-green-700 text-sm hidden md:block mt-4"> 房屋租售 </span>
                    <h1 class="text-gray-800 text-4xl font-bold mt-2 mb-2 leading-tight">
                        房屋租售
                    </h1>
                    <p class="text-gray-600 mb-4">
                        本地免费房屋租售信息公布，帮助您快速找到合适房源
                    </p>
                    <a href="house/list"
                       class="inline-block px-4 text-sm py-2 mt-2 rounded-md bg-green-700 text-gray-100">
                        >>查看更多
                    </a>
                </div>

                <!-- sub-main posts -->
                <div class="w-full md:w-4/7  mt-3">
                    <!-- post 1 -->
                    <div class="rounded w-full border-b-2 py-1 flex flex-col md:flex-row mt-3 mb-10 "
                         v-for="(house,index) in form.houseList" :key="index">
                        <img :src="house.preview"
                             class="block lg:block rounded-md h-64 md:h-32 m-4 md:m-0"/>
                        <div class="bg-white rounded px-4">
                            <span class="text-red-600 text-sm font-bold hidden md:block"> HOTS </span>
                            <div class="md:mt-0 text-gray-800 font-semibold text-xl mb-2 transform hover:scale-110">
                                <router-link :to="{path:`/house/${house.id}/show`}">
                                    {{ house.title }}
                                </router-link>

                            </div>
                            <p class="block p-2 pl-0 pt-1 text-sm text-gray-600">
                                {{ house.description |ellipsis_Content(100) }}
                            </p>
                        </div>
                    </div>
                </div>

            </div>
            <!-- end featured section -->
            <el-divider></el-divider>

            <!-- recent posts -->
            <div class="flex mt-16 mb-4 px-4 lg:px-0 items-center justify-between">
                <h2 class="font-bold text-3xl">二手转让</h2>
                <a href="used/list"
                   class="bg-gray-200 hover:bg-green-200 text-gray-800 px-3 py-1 rounded cursor-pointer">
                    查看更多
                </a>
            </div>
            <div class="block space-x-0 lg:flex lg:space-x-6">

                <div class="rounded w-full lg:w-1/2 lg:w-1/3 p-4 lg:p-0" v-for="(used,index) in form.usedList"
                     :key="index">
                    <img :src="used.preview"
                         class="rounded h-64" alt="technology"/>
                    <span class="text-red-600 text-md font-bold hidden md:block"> NEW </span>

                    <div class="p-4 pl-0">
                        <h2 class="font-bold text-2xl text-gray-800 transform hover:scale-110">
                            <router-link :to="{path:`/used/${used.id}/show`}">

                                {{ used.title }}
                            </router-link>
                        </h2>
                        <p class="text-gray-700 mt-2">
                            {{ used.description | ellipsis_Content() }}
                        </p>

                        <router-link :to="{path:`/used/${used.id}/show`}">

                            <a href="#" class="inline-block py-2 rounded text-sm text-green-900 mt-2 ml-auto"> >>详情 </a>
                        </router-link>
                    </div>
                </div>
            </div>
            <!-- end recent posts -->
            <el-divider></el-divider>
            <!-- 广告 -->
            <div class="rounded flex justify-between md:shadow h-32 mt-12" v-for="(ad,index) in form.adList">
                <div>
                    <el-image fit="contain" class="w-full h-32" :src="ad.preview"></el-image>
                </div>
                <div>
                    <div class="px-4 py-2 text-center">
                        <h3 class="text-3xl text-gray-800 font-bold text-red-600">{{ ad.title }}</h3>
                        <p class="text-xl text-gray-700 text-md">{{ ad.description }}</p>
                        <div class="w-full text-sm text-gray-400">电话：{{ ad.extra.mobile }}</div>
                    </div>
                    <div class="text-sm"><span class="text-gray-400">广告</span></div>
                </div>

            </div>
            <!-- ens subscribe section -->
            <el-divider></el-divider>

            <!--车辆买卖-->
            <!-- popular posts -->
            <div class="flex mt-16 mb-4 px-4 lg:px-0 items-center justify-between">
                <h2 class="font-bold text-3xl">车辆买卖</h2>
                <a href="car/list"
                   class="bg-gray-200 hover:bg-green-200 text-gray-800 px-3 py-1 rounded cursor-pointer">
                    查看更多
                </a>
            </div>
            <div class="block space-x-0 lg:flex lg:space-x-6">
                <div class="rounded w-full lg:w-1/2 lg:w-1/4 p-4 lg:p-0" v-for="(car,index) in form.carList">
                    <img :src="car.preview"
                         class="rounded w-1/2" alt="technology"/>
                    <span class="text-red-600 text-md font-bold hidden md:block"> RECOMMEND </span>

                    <div class="p-4 pl-0">
                        <h2 class="font-bold text-2xl text-gray-800 transform hover:scale-110">
                            <router-link :to="{path:`/car/${car.id}/show`}">

                                {{ car.title }}

                            </router-link>
                        </h2>
                        <p class="text-gray-700 mt-2">{{ car.description |ellipsis_Content() }}</p>
                        <router-link :to="{path:`/car/${car.id}/show`}">

                            <a href="#" class="inline-block py-2 rounded text-green-900 mt-2 ml-auto"> >>详情 </a>
                        </router-link>
                    </div>
                </div>
            </div>

            <el-divider></el-divider>

            <!-- end popular posts -->
            <div class="flex mt-16 mb-4 px-4 lg:px-0 items-center justify-between">
                <h2 class="font-bold text-3xl">宠 物</h2>
                <a href="pet/list"
                   class="bg-gray-200 hover:bg-green-200 text-gray-800 px-3 py-1 rounded cursor-pointer">
                    查看更多
                </a>
            </div>
            <div>
                <!--Dummy Posts-->
                <div class="block space-x-0 lg:flex lg:space-x-6">
                    <!--First post-->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-1 my-3 max-w-md"
                         v-for="(pet,index) in form.petList">
                        <div>
                            <img class="rounded-md w-screen md:w-48 h-48 object-contain"
                                 :src="pet.preview"
                                 alt="Sarah dayan"></div>
                        <span class="text-red-600  text-md font-bold hidden md:block"><span
                            class="bg-yellow-300 p-2 rounded">BEAUTY</span> </span>

                        <div class="p-4 md:p-0">
                            <div class="font-bold text-2xl font-gray-900 py-2 transform hover:scale-110">
                                <router-link :to="{path:`/pet/${pet.id}/show`}">
                                    {{ pet.title |ellipsis_Title() }}
                                </router-link>
                            </div>
                            <div class="text-sm italic text-gray-600">{{ pet.description|ellipsis_Content(10) }}</div>
                            <div class="text-sm">
                                {{ pet.description | ellipsis_Content(22) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <el-divider></el-divider>

        </main>
    </div>
</template>

<script>

export default {
    route: {path: '/'},
    data() {
        return {
            form: {
                houseList: [],
                usedList: [],
                adList: [],
                carList: [],
                petList: []
            }

        }
    },
    async created() {
        this.form.houseList = await this.axios.get('houseList')
        this.form.carList = await this.axios.get('carList')
        this.form.usedList = await this.axios.get('usedList')
        this.form.petList = await this.axios.get('petList')
        this.form.adList = await this.axios.get('adList');
    }
}
</script>
